﻿<!DOCTYPE html>
<html style="height: 100%;">
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>jQuery手机端弹出层提示对话框 - 站长素材</title>
<link rel="stylesheet" href="common.css">
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="alertPopShow.js"></script>
</head>

<body>

<script type="text/javascript">
$(function(){

   $('#demo1').on('click', function(){
		webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);
   });
   
   $('#demo2').on('click', function(){
		popTipShow.alert('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等', ['知道了'],
			function(e){
			  //callback 处理按钮事件		  
			  var button = $(e.target).attr('class');
			  if(button == 'ok'){
				//按下确定按钮执行的操作
				//todo ....
				this.hide();
			  }	
			}
		);
   });
   
   $('#demo3').on('click', function(){
		popTipShow.confirm('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等',['确 定','取 消'],
			function(e){
			  //callback 处理按钮事件
			  var button = $(e.target).attr('class');
			  if(button == 'ok'){
				//按下确定按钮执行的操作
				//todo ....
				this.hide();
				setTimeout(function() {
					webToast("操作成功","top", 2000);
				}, 300);
			  }

			  if(button == 'cancel') {
				//按下取消按钮执行的操作
				//todo ....
				this.hide();
				setTimeout(function() {
					webToast("您选择“取消”了","bottom", 2000);
				}, 300);
			  }
			}
		);
   });
   
   $('#demo4').on('click', function(){
		var html = "<label>姓名：<input class='confirm_input' placeholder='请输入'></label>";
		popTipShow.confirm('弹窗标题',html,['确 定','取 消'],
			function(e){
			  //callback 处理按钮事件
			  var button = $(e.target).attr('class');
			  if(button == 'ok'){
				if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
					webToast("姓名不能为空！","bottom", 3000);
					return;
				}	
				
				this.hide();
				setTimeout(function() {
					webToast($(".confirm_input").val(),"bottom", 3000);
				}, 300);
				
				//按下确定按钮执行的操作
				//todo ....								
			  }

			  if(button == 'cancel') {
				//按下取消按钮执行的操作
				//todo ....
				this.hide();
				setTimeout(function() {
					webToast("您选择“取消”了","top", 2000);
				}, 300);
			  }
			}
		);
   });
   
});
</script>
<div class="demo" id="demo1">toast</div>
<div class="demo" id="demo2">alert</div>
<div class="demo" id="demo3">confirm</div>
<div class="demo" id="demo4">confirm+input</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

